import React, { Component } from "react";
import './index.scss'
import NavHeader from "../../components/NavHeader";
import styles from './index.module.css'
// 导入axios
// import axios from 'axios'
// import { Item } from "antd-mobile/lib/tab-bar";
// sheng声明全局变量
const BMap = window.BMapGL
// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255,255,255)',
    textAlign: 'center'
}
export default class Map extends Component {
    state = {
        label: '上海',
        res: [
            { label: '杨浦', value: 0 },
            { label: '浦东', value: 1 },
            { label: '闵行', value: 2 },
            { label: '普陀', value: 3 },
            { label: '金山', value: 4 },
            { label: '宝山', value: 5 },
            { label: '静安', value: 6 },
            { label: '闸北', value: 7 },
            { label: '徐汇', value: 8 },
            { label: '青浦', value: 0 },
            { label: '虹口', value: 9 },
            { label: '嘉定', value: 10 },
            { label: '奉献', value: 11 },
            { label: '黄浦', value: 12 },
        ]
    }
    componentDidMount() {
        this.initMap()
    }

    // 初始化地图
    initMap() {
        // 初始化地图实例
        // 注意在react脚手架中全局对象需要使用window来访问，否则会造成eslint效验错误
        // 获取当前定位城市
        // const { label, value } = JSON.parse(localStorage.getItem('hkzf-city'))
        // console.log(label, value)
        const { label } = this.state
        const map = new BMap.Map("container");
        // 设置中心点坐标
        // const point = new window.BMapGL.Point(116.404, 39.915);
        // 初始化地图
        var myGeo = new BMap.Geocoder()
        myGeo.getPoint(label, point => {
            if (point) {
                // chuangshi chuan初始化地图
                // 地图缩放等级
                map.centerAndZoom(point, 11);
                // map.addOverlay(new BMap.Marker(point))
                // 添加控件
                map.addControl(new BMap.NavigationControl())
                map.addControl(new BMap.ScaleControl())

                map.addControl(new BMap.ZoomControl())
                // 创建地图文本覆盖物
                // 请求房源信息
                //    const res =   await  axios.get(`http://localhost:8080/area/map?id=${value}`)
                // //    console.log(res)
                // res.data.body.forEach(item => {
                //     const { coord: { longitude, latitude }, label: areaname, count } = item
                //     const opts = {
                //         position: point,
                //         offset: new BMap.Size(-35, -35)
                //     }
                //     const label = new BMap.Label('', opts)
                //     // 设置房源覆盖物
                //     label.setContent(`<div class='${styles.bubble}'>
                //          <p class='${styles.name}'>${areaname}</p>
                //          <p>${count}</p>
                //          </div>`)

                // });


                const opts = {
                    position: point,
                    offset: new BMap.Size(-35, -35)
                }
                const label = new BMap.Label('', opts)
                // 设置房源覆盖物
                label.setContent(`<div class='${styles.bubble}'>
                 <p class='${styles.name}'>浦东</p>
                 <p>33</p>
                 </div>`)
                // 设置样式
                label.setStyle(labelStyle)
                // 添加单击事件
                label.addEventListener('click', () => {
                    console.log('点击啦覆盖物')
                    // 放大地图
                    map.centerAndZoom(point, 13);
                    setTimeout(() => {
                        map.clearOverlays()
                    }, 500)

                })
                // tianjia 添加到地图中
                map.addOverlay(label)
            }
        }, label)
        // map.centerAndZoom(point, 15);

    }
    render() {
        return (
            <div className="map">
                {/* 顶部导航栏 */}
                <NavHeader title='地图找房' onLeftClick={() => {
                    console.log('点击啦')
                }}></NavHeader>
                {/* 创建地图元素 */}
                <div id='container'></div>
            </div>
        )
    }
}